@import './utils/func';
@import './utils/var';

.page-custom{
  .g-main {
    @extend %bgfull;
    background-image: url("/@@/images/custom/bg1.jpg");
  }
  .g-right {
    @extend %bgfull;
    background-image: url("/@@/images/custom/bg2.jpg");
  }
  .g-slogan{
    img{
      width: 240px;
      opacity: .89;
    }
  }
  .g-items{
    .item{
      &:not(:last-child) {
        .text{
          left: 50%;
          margin-left: 25px;
        }
      }
      &:last-child {
        .text{
          right: 50%;
          margin-right: 25px;
        }
      }
    }
    .icon{
      img{
        width: 45px; height: 38px;
      }
    }
    .con{
      position: relative;
      text-align: center;
      &:hover{
        z-index: 1;
        .text{
          transform: translate(0, 0);
          opacity: .89;
        }
      }

      img{
        width: 50px; height: 190px;
      }
      .text{
        position: absolute; top: 0;
        box-sizing: border-box;
        width: 100px; min-height: 100%;
        padding: 10px 6px;
        background-color: white;
        transform: translate(0, -20px);
        opacity: 0;
        transition: all .5s ease-out;
        .tit{
          writing-mode: vertical-rl;
          font-size: 16px; letter-spacing: 5px;
        }
        .summary{
          margin-top: 0; padding-top: 8px;
          font-size: 12px; letter-spacing: 0; text-align: justify;
          border-top: 1px solid #eee;
        }
      }
    }
  }
  .mu{
    position: absolute; top: 40%; left: 32%;
    margin: -70px 0 0 -124px;
    img{
      width: 160px;
    }
  }
}